<template>
	<view class="uni-margin-wrap" :style="{height: windowHeight + 'px'}">		
		<swiper 
			class="swiper" 
			circular 
			:indicator-dots="false" 
			:interval="interval"
			:duration="300"
			:vertical="true"
			:easing-function="easeOutCubic"
			:current="activeVedioIndex"
			@change="changeSwiper"
		>
			<swiper-item  v-for="(item, index) in mediaList" :key="index">
				<view class="swiper-item uni-bg-red">
					<view class="video_play_box" :class="[isShowPingLun ? 'c_height_40' : '']">
						<video 
							v-show="item.mediaType !== 0"
						  class="myVideo"
							:id="'myVideo' + index" 
							:src="item.content.mediaList[0].url"
							controls
							:loop="true"
							:show-play-btn="false"
							:enable-progress-gesture="false"
							:object-fit="cover"
							@click="handleClickVideo(index)"
						/>
						
						<!-- <image v-show="item.mediaType == 0" class="full" :src="item.fileUrl" mode=""></image> -->
						
						<!-- 暂定播放 icon -->
						<i v-show="isPause" class="pause_icon iconfont icon-icon_play color_fff fs_30_i" @click="handleClickVideo(index)"></i>
					</view>
					
					<!-- 左侧 用户信息、商品信息 -->
					<view class="vedio_left_box" v-show="!isShowPingLun">
						<view class="user_box">
							<view class="name mn color_fff">{{ item.publishUser.nickname }}᠂  {{ formatCreateTime(item.createTime) }} </view> 
							<!-- <view class="mai_niu mn color_fff">ᠦᠬᠡᠷ ᠬᠤᠳᠠᠯᠳᠤᠬᠤ</view> -->
							<view class="mai_niu mn color_fff"># {{ item.title }}</view> 
							<view class="addr mn color_fff">{{ productData.breedingType.label || 'ᠱᠢᠮᠧᠨ᠋ᠳᠡᠷ' }} | {{ item.address }}</view>
						</view>
						
						<view class="pro_info_box">
							<view class="pro_info">
								<view class="image_box">
									<image :src="productData.imageList[0].url" mode=""></image>
								</view>
																	
								<view class="info_box">
									<text class="category mn">{{ productData.breedingType.label }}</text>
									<text class="price__data mn">
										<text class="price">￥{{ productData.price || 'xxxxx' }}/ᠨᠢᠭᠡ </text> 
										{{ '' + item.blogStat.starNum }} ᠬᠥᠮᠦᠨ ᠰᠠᠨᠠᠭ᠎ᠠ᠎ᠲᠠᠢ 
										<!-- | {{ item.oxInfo.gou_mai_ren }} ᠬᠥᠮᠦᠨ ᠬᠤᠳᠠᠯᠳᠤᠨ ᠠᠪᠤᠭᠰᠠᠨ -->
									</text>
								</view>
							</view>
						</view>
					</view>
				
					<!-- 右侧 用户头像、点赞、评论、收藏、转发 -->
					<view class="vedio_right_box" v-show="!isShowPingLun">
						<view class="avatar_box">
							<image :src="item.publishUser.avatar" mode="" @click="goToUserVideoList(item.publishUser.id)"></image>
							
							<!-- 未关注状态 --> 
							<i 
								class="guan_zhu_icon iconfont icon-tianjiadise color_orange bgc_fff fs_16_i border_radius_50p" 
								@click="followUser(item.publishUser.id)">
							</i>
							<!-- 已关注状态 -->
							<!-- <i 
								class="yi_guan_zhu_icon iconfont icon-31yiguanzhudianpu color_fff bgc_orange fs_16_i border_radius_50p"
								@click="unFollowUser(item.publishUser.id)">
							</i> -->
						</view>
						
						<view class="menu">
							<!-- 点赞 -->
							<view class="item_box">
								<view class="item_icon_box" @click="handleClickDianZan(index)">
									<i v-if="item.userConf.like == 1" class="iconfont icon-yidianzan color_ff194e fs_34_i"></i>
									<i v-else class="iconfont icon-yidianzan color_eee fs_34_i"></i>
								</view>
								<text class="item_value">{{ item.blogStat.likeNum }}</text>
							</view>
							
							<!-- 评论 -->
							<view class="item_box">
								<view class="item_icon_box" @click="handleClickPingLun(index)"> 
									<i class="iconfont icon-pinglun1 color_eee fs_28_i"></i>
								</view>
								<text class="item_value">{{ item.blogStat.commentNum }}</text>
							</view>
							
							<!-- 收藏 -->
							<view class="item_box">
								<view class="item_icon_box" @click="handleClickShouCang(index)">
									<i v-if="item.userConf.star == 1" class="iconfont icon-shoucangxiao color_orange fs_28_i"></i>
									<i v-else class="iconfont icon-shoucangxiao color_eee fs_28_i"></i>
								</view>
								<text class="item_value">{{ item.blogStat.starNum }}</text>
							</view>
							
							<!-- 转发 -->
							<view class="item_box">
								<view class="item_icon_box" @click="handleClickZhuanFa(index)" >
									<button class="share_btn" open-type="share" @ShareAppMessage="onShareAppMessage()">
										<i class="iconfont icon-zhuanfa color_eee" ></i>
									</button>
									<text class="item_value visit_num">{{ item.blogStat.visitNum }}</text>
								</view>
							</view>
						</view>
					</view>
				
					<!-- 评论信息 -->
					<view class="ping_lun_box" v-show="isShowPingLun">						
						<view class="ping_lun_total">
							<text class="ping_lun_count">{{ commentList.length }} 条评论</text>
							
							<i class="hide_icon iconfont icon-xiala1 mainColor fs_34_i" @click="hidePingLun()"></i>
						</view>
						
						<scroll-view 
							:scroll-top="scrollTop" 
							scroll-y="true" 
							class="scroll-Y"
							:show-scrollbar="false"
							@scrolltolower="scrollToLower"
						>
							<view class="ping_lun_item" v-for="(pingLunItem, index2) in commentList" :key="index2">
								<view class="ping_lun_avatar_box" @click="handleClickPingLunAvatar(index2)">
									<image :src="pingLunItem.user.avatar || ping_lun_def_avatar" mode=""></image>
								</view>
								
								<view class="ping_lun_info">
									<text class="ping_lun_name">{{ pingLunItem.user.nickName || 'xxxx' }}</text>
									<text class="ping_lun_time">{{ pingLunItem.createTime }}</text>
									<br/>
									
									<text class="ping_lun_content">{{ pingLunItem.content }}</text>
								</view>
								
								<view class="ping_lun_dian_zan_box">
									<i class="iconfont icon-yidianzan color_ccc fs_26_i"></i>
								</view>
							</view>
						</scroll-view>
						
						<!-- 提交评论 -->
						<view class="sub_ping_lun">
							<view class="input_ping_lun">
								<input type="text" v-model="commentText" placeholder="请输入评论内容">
							</view>
							
							<view class="sub_btn" @click="submitComment(index)">
								提交
							</view>
						</view>
					</view>
				</view>
				
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import getSystemInfo from '@/mixins/basic.js'
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	
	export default {
		mixins: [getSystemInfo],
		
		data() {
			return {
				player: null,
				isPause: false,
				// activeMenuIndex: 0,
				activeVedioIndex: 0,
				
				mediaList: [],
				productId: '',
				productData: {},
				
				isShowPingLun: false,
				pingLunPlayer: false,
				
				currentVedioUrl: '',
				currentPingLunList: [],
				ping_lun_def_avatar: require('@/static/img/tabbar/me.png'),
				isPausePingLunVideo: false,
				
				dianZan: false,
				pingLun: false,
				shouCang: false,
				zhuanFa: false,
				
				user: {},
				commentText: '',
			};
		},
			
		onLoad(options) {
			this.getSystemHeight()
			
			// 获取 传递过来的 参数
			this.activeVedioIndex = options.index
			if (options.listType == 'my-likes') {
				// 请求 我点赞的视频列表
				this.getMyLikes()
			} else if (options.listType == 'my-stars') {
				// 请求 我收藏的视频列表
				this.getMyStars()
			}
		},
			
		created(){
			let id = 'myVideo' + this.activeVedioIndex
			this.player = uni.createVideoContext(id, this)
			this.player.play()

			setTimeout(() => {
				if (this.mediaList && this.mediaList.length) {
					let productId = this.mediaList[0].content.productId
					this.getProductData(productId)
				}
			}, 500)
		},
		
		mounted() {
			this.user = uni.getStorageSync('user')
			
			uni.$on("playVideo", () => {
				// 修正暂停键的显示与隐藏
				this.isPause = false

				let id = 'myVideo' + this.activeVedioIndex
				this.player = uni.createVideoContext(id, this)
				this.player.play()
				
				this.isShowPingLun = false
			})
		},
		
		methods: {
			// 获取 我的点赞 List
			getMyLikes() {
				NET.request(API.myLikeList, 'GET')
				.then(res => {
					if (res.code === 200) {
						this.mediaList = res.data
					}
				})
				.catch(err => {
					uni.showToast({
						title: '获取失败！',
						icon: 'error'
					})
				})
			},
			
			// 获取 我的收藏 List
			getMyStars() {
				NET.request(API.myStarList, 'GET')
				.then(res => {
					if (res.code === 200) {
						this.mediaList = res.data
					}
				})
				.catch(err => {
					uni.showToast({
						title: '获取失败！',
						icon: 'error'
					})
				})
			},
			
			// 监听 swiper 滑动
			async changeSwiper(e) {
				this.player.pause()
				
				// 隐藏评论
				this.isShowPingLun = false
				this.isPause = false
				
				this.activeVedioIndex = e.detail.current
				let id = 'myVideo' + e.detail.current
				
				this.player = uni.createVideoContext(id, this)
				this.player.play()
				
				let productId = this.mediaList[this.activeVedioIndex].content.productId
				this.getProductData(productId)
				
				// if (e.target.current != 0){
				// 	this.player?.pause()
				// }else{
				// 	this.player?.play()
				// }
			},
			
			// 获取分类
			async getProductData(id) {
				let that = this
				NET.request(`https://hxyc.dayaar.com.cn/pro/api/salesapp/shop/product/${id}`, 'GET')
				.then(res => {
					
					if (res.code === 200) {
						that.productData = res.data
					}
				})
				.catch(err => {
					uni.showToast({
						title: '获取失败！',
						icon: 'error'
					})					
				})
			},
			
			// 禁止 swiper 滑动
			stopSwiper() {
				return true
			},
			
			// 点击视频 （播放 / 暂停）
			handleClickVideo(index) {
				let id = 'myVideo' + index
				
				this.player = uni.createVideoContext(id, this)	
				
				if (this.isPause) {
					this.player.play()
					this.isPause = false
				} else {
					this.player.pause()
					this.isPause = true
				}
			},
			
			// 点击 头像 跳转到 用户视频列表页
			goToUserVideoList(id) {
				uni.navigateTo({
					url: '/subcontract/person-center/person-center',
				})
			},
			
			// 关注用户
			followUser(userId) {
				// 判断 token
				if (!this.judgeToken()) return false
				
				NET.request(API.followUser, { followToUser: userId }, 'POST')
				.then(res => {
					// 改变 关注 icon 
					
					// v-if / v-else
					
					
					uni.showToast({
						title: '已关注！',
						icon: 'success'
					})
				})
				.catch(err => {
					console.error('关注失败！', err)
					
					uni.showToast({
						title: '关注失败！',
						icon: 'error'
					})
				})
			},
			
			// 取消关注
			unFollowUser(userId) {
				NET.request(API.unFollowUser, { followToUser: userId }, 'POST')
				.then(res => {
					// 改变 关注 icon 
					
					// v-if / v-else

					
					uni.showToast({
						title: '已取消关注！',
						icon: 'success'
					})
				})
				.catch(err => {
					console.error('取消关注失败！', err)
					
					uni.showToast({
						title: '取消关注失败！',
						icon: 'error'
					})
				})
			},
			
			// 点击 点赞图标
			handleClickDianZan(index) {
				// 判断 token
				if (!this.judgeToken()) return false
				
				// 判断用户是否点赞过
				if (this.mediaList[index].userConf == null) {
					this.mediaList[index].userConf = {}
					this.dianZan = true
					this.mediaList[index].userConf.like = 1
					this.mediaList[index].userConf.star = 0
					this.mediaList[index].blogStat.likeNum ++
				} else if (this.mediaList[index].userConf.like == 1) {
					this.dianZan = false
					this.mediaList[index].userConf.like = 0
					this.mediaList[index].blogStat.likeNum --
				} else if (this.mediaList[index].userConf.like == 0) {
					this.dianZan = true
					this.mediaList[index].userConf.like = 1
					this.mediaList[index].blogStat.likeNum ++
				}
				
				let params = {
					blogId: this.mediaList[index].id,
					like: this.dianZan
				}
				NET.request(API.likeBlog, params, 'POST')
			},
			
			// 点击 收藏图标
			handleClickShouCang(index) {
				// 判断 token
				if (!this.judgeToken()) return false
				
				// 判断用户是否收藏过
				if (this.mediaList[index].userConf == null) {
					this.mediaList[index].userConf = {}
					this.shouCang = true
					this.mediaList[index].userConf.like = 0
					this.mediaList[index].userConf.star = 1
					this.mediaList[index].blogStat.starNum ++
				} else if (this.mediaList[index].userConf.star == 1) {
					this.shouCang = false
					this.mediaList[index].userConf.star = 0
					this.mediaList[index].blogStat.starNum --
				} else if (this.mediaList[index].userConf.star == 0) {
					this.shouCang = true
					this.mediaList[index].userConf.star = 1
					this.mediaList[index].blogStat.starNum ++
				}
				
				let params = {
					blogId: this.mediaList[index].id,
					star: this.shouCang
				}
				NET.request(API.shouCangBlog, params, 'POST')
			},
			
			// 点击 转发图标
			handleClickZhuanFa(index) {
				this.zhuanFa = !this.zhuanFa
			},
			
			// 点击 评论图标
			handleClickPingLun(index) {
				// 显示评论信息
				this.isShowPingLun = true
				let blogId = this.mediaList[index].id
				
				// 获取当前视频的评论列表
				this.getCommentListByBlogId(blogId)
			},	
			
			// 提交评论
			submitComment(index) {
				// 判断 token
				if (!this.judgeToken()) return false
				
				let params = {
					blogId: this.mediaList[index].id,
					content: this.commentText,
					createBy: '',
					createTime: this.currentTime,
					quote: {},
					remarks: "xxxxx",
					updateBy: "xxxxxxx",
					updateTime: this.currentTime,
					user: {}
				}
				NET.request2(API.commentBlog, params, 'POST')
				.then(res => {
					console.log('提交评论 : ', res)
				})
				.catch(err => {
					console.error('提交评论失败 : ', err)
				})
			},
			
			// 点击评论页面视频
			handleClickPingLunVideo() {
				if (this.isPause) {
					this.player.play()
					this.isPause = false
				} else {
					this.player.pause()
					this.isPause = true
				}
			},
			
			// 点击评论用户的头像
			handleClickPingLunAvatar(index) {
				uni.navigateTo({
					url: '/subcontract/person-center/person-center',
				})
			},
			
			// 点赞评论
			dianZanPingLun(index) {
				// 判断 token
				if (!this.judgeToken()) return false
				
			},
			
			// 隐藏评论
			hidePingLun() {
				this.isShowPingLun = false
			},
			
			// 监听滚动到评论底部
			scrollToLower() {
				uni.showToast({
					icon: 'none',
					title: '已经到底了!'
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.c_height_40 {
		width: auto;  
		position:relative;
		animation: animate1 0.6s 1;
		-webkit-animation: animate1 0.6s 1; /*Safari and Chrome*/
		animation-fill-mode:forwards;
		-webkit-animation-fill-mode:forwards; /* Safari 和 Chrome */
	}	
	@keyframes animate1 {
	  to {height: 40%;}
	  from {height: 100%;}
	}
	
	@-webkit-keyframes animate1 {
		to {height: 40%;}
		from {height: 100%;}
	}
	
	.c_height_100 {
		width: auto;
		position:relative;
		animation: animate2 0.6s 1;
		-webkit-animation: animate2 0.6s 1; /*Safari and Chrome*/
		animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards; /* Safari 和 Chrome */
	}
	@keyframes animate2 {
	  to {height: 100%;}
	  from {height: 40%;}
	}
	
	@-webkit-keyframes animate2 {
		to {height: 100%;}
		from {height: 40%;}
	}
	
	.uni-margin-wrap {
		width: 100%;
		// border: 1px solid red;
	}
	.swiper {
		height: 100%;
	}
	.swiper-item {
		display: block;
		width: 100%;
		height: 100%;
		
		.video_play_box {
			width: 100%;
			height: 100%;
			position: relative;
			
			.myVideo { width: 100%; height: 100%; }
			
			.pause_icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
		}
		
		.vedio_left_box {
			// display: none;
			width: 75px;
			height: calc(100% - 100px);
			// border: 1px solid blue;
			position: absolute;
			left: 10px;
			top: 20px;
			
			// 用户信息 div
			.user_box {
				width: 100%;
				height: 40%;
				position: relative;
				// background-color: #fff;
				border-radius: 5px;
				
				.name, .mai_niu, .addr { 
					writing-mode: vertical-lr; 
					font-family: mn;
					position: absolute;
					top: 10px; 
					font-size: 15px;
				}
				.name {
					left: 10px;
				}
				.mai_niu {
					left: 30px;
				}
				.addr {
					left: 50px;
					font-size: 15px;
				}
			}
		
			// 商品信息 div
			.pro_info_box {
				padding: 10px;
				height: 60%;
				// border: 1px solid red;
				position: relative;
				box-sizing: border-box;
				
				.pro_info {
					height: 100%;
					padding: 4px 2px;
					background-color: #fff;
					border-radius: 6px;
					box-sizing: border-box;
					
					.image_box {
						width: 50px;
						height: 50px;
						padding: 2px;
						box-sizing: border-box;
						
						image { width: 100%; height: 100%; border-radius: 6px; }
					}
					
					.info_box {
						padding: 10px;
						height: 100%;
						position: relative;
						box-sizing: border-box;
						margin-top: 5px;
						
						.category, .price__data {
							position: absolute;
							top: 0;
							writing-mode: vertical-lr;
							font-family: mn;  -webkit-font-family: mn;
						}
						.category {
							font-size: 14px;
							font-weight: bold;
							left: 6px;
						}
						.price__data { 
							font-size: 14px; 
							left: 28px;
							 
							.price { color: #ff3c20; margin-bottom: 5px; }
						}
					}
				}
			}
		}
	
		.vedio_right_box {
			width: 50px;
			height: 50%;
			position: absolute;
			top: 38%;
			right: 10px;
			// border: 1px solid red;
			
			.avatar_box {
				width: 50px;
				height: 50px;
				border-radius: 50%;
				border: 1px solid #fff;
				box-sizing: border-box;
				position: relative;
				
				image { width: 100%; height: 100%; border-radius: 50%; }
				
				.guan_zhu_icon, .yi_guan_zhu_icon {
					position: absolute;
					bottom: -8px;
					left: 50%;
					transform: translateX(-50%);
				}
			}
			
			.menu {
				width: 100%;
				height: calc(100% - 60px);
				margin-top: 30px;
				
				.item_box {
					width: 100%;
					text-align: center;
					
					.item_icon_box {
						width: 100%;
						height: calc(100% - 10px);
						margin-top: 10px;
						text-align: center;
						box-sizing: border-box;
						// border: 1px solid #f00;
						
						.share_btn {
							width: 30px;
							height:30px;
							background: none !important;
							text-align: center;
							line-height: 30px !important;
							font-size: 30px !important;
							padding-left: 0 !important;
							padding-right: 0 !important;
							
							i { font-size: 28px !important; }
						}
						.share_btn::after { border: none !important; }
					}
					.item_value {
						position: relative;
						top: -4px;
						font-size: 12px;
						color: #eee;
					}
					
					.visit_num {
						top: -10px !important;
					}
				}
			}
		}
	
		.ping_lun_box {
			width: 100%;
			height: 60%;
			box-sizing: border-box;
			background-color: #fff;
			border-top-left-radius: 6px;
			border-top-right-radius: 6px;
			position: relative;
			overflow-y: auto;
			padding-bottom: 35px;
			
			.hide_icon_box {
				width: 30px; height: 30px; position: absolute; top: 3px; left: 3px;
				// image{ width: 100%; height: 100%; }
			}
			
			.ping_lun_total {
				width: 100%;
				text-align: center;
				padding: 5px 0;
				box-sizing: border-box;
				position: relative;
				
				.hide_icon {
					position: absolute;
					top: 0;
					right: 10px;
					// transform: translateX(-50%);
				}
			}
		
			.scroll-Y { 
				height: calc(100% - 35px);
			
	
				.ping_lun_item {
					width: 100%;
					height: 47px;
					position: relative;
					// border: 1px solid red;
					
					.ping_lun_avatar_box {
						width: 40px;
						height: 40px;
						position: absolute;
						top: 5px;
						left: 5px;
						
						image { width: 100%; height: 100%; }
					}
					
					.ping_lun_info {
						width: calc(100% - 100px);
						height: 100%;
						position: absolute;
						top: 2.5px;
						left: 45px;
						
						.ping_lun_name { font-size: 12px };
						.ping_lun_content { font-size: 14px };
						.ping_lun_time { margin-left: 30px; font-size: 12px };
					}
					
					.ping_lun_dian_zan_box {
						width: 30px;
						height: 30px;
						position: absolute;
						top: 10px;
						right: 5px;
						
						image { width: 100%; height: 100%; }
					}
				}
			}
			
			.sub_ping_lun {
				width: 96%;
				height: 35px;
				margin: 0 auto;
				box-sizing: border-box;
				border-radius: 3px;
				border: 1px solid #eee;
				position: relative;
				padding: 5px;
				box-sizing: border-box;
				
				.input_ping_lun {
					width: 85%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 5px;
					
					input { width: 100%; height: 100%; padding: 0 10px; }
				}
				
				.sub_btn {
					width: 12%;
					height: 100%;
					text-align: center;
					position: absolute;
					top: 0;
					right: 5px;
					display: flex;
					align-items: center;
					color: #1c9aa0;
					z-index: 9;
				}
			}
		}
	}
</style>